<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container {
            position: relative;
            width: 50%;
        }

        .image {
            border: 1px solid red;
            display: block;
            width: 100%;
            height: auto;
            transition: .5s ease;
            backface-visibility: hidden;
        }

        .middle {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .container:hover .image {
            opacity: 0.8;
        }
        .container:hover .middle {
            opacity: 1;
        }

    </style>
</head>

<body>

    <h1>兼容 ie  </h1>
    
    <pre>
        <h2>
            父容器设置为 :  position: relative;
            按钮容器设置为  opacity: 0;  position: absolute; (透明+绝对定位居中)
            鼠标移上去直接让背后的图片 , opacity: 0.3;  按钮 opacity: 1;
        </h2>
    </pre>

    <div class="container">
        <img src="../img/Tesla (3).jpeg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
            <button style="padding: 18px; background: #000; color: white;">open it</button>
        </div>
    </div>



    	
  <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

        必知必会         

        .container {
            position: relative;
            width: 50%;
        }

        .image {
            border: 1px solid red;
            display: block;
            width: 100%;
            height: auto;
            transition: .5s ease;
            backface-visibility: hidden;
        }

        .middle {
            transition: .5s ease;
            opacity: 0;               => 透明度设置为 0 , 实现隐藏的效果
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .container:hover .image {
            opacity: 0.8;
        }
        .container:hover .middle {
            opacity: 1;             => 鼠标放上去, 透明度设置为1, 显示出来
        }


        <div class="container">
            <img src="img/Tesla (3).jpeg" alt="Avatar" class="image" style="width:100%">
            <div class="middle">
                <button style="padding: 18px; background: #000; color: white;">open it</button>
            </div>
        </div>

    </xmp>



</body>
</html>